<template>
  <view
    class="top_navigation_bar_box"
    :class="{ fixed: props.isFixed }"
    :style="{
      paddingTop: `${capsule?.top}px`,
      backgroundColor: isDisplayBackColor || !props.isFixed   ? '#fff' : 'transparent',
      height: `${capsule?.height}px`,
    }"
  >
    <!-- 左侧展示 -->
    <slot name="left">
      <view
      @click="address?.open"
        class="left"
        :style="{ maxWidth: !props.isSearch ? `calc(100% - ${230}rpx)` : '' }"
      >
        <uni-icons
          class="icon"
          type="location"
          color="rgb(41, 36, 36)"
          size="26"
        />
        <view
          class="msg"
          :style="{ width: !props.isSearch ? `calc(100% - ${25}rpx)` : '' }"
        >
          {{ useRegion.placeList[useRegion.placeIndex] }}
        </view>
      </view>
    </slot>

    <!-- 中间展示 -->
    <slot name="middle">
      <view class="middle" v-if="props.isSearch">
        <search-bar :is-button="false" :is-input="false" />
      </view>
    </slot>

    <!-- 右侧其他功能展示 -->
    <slot name="right">
      <view class="right" v-if="!capsule || isToolbar">
        <view
          v-for="(item, index) in otherFeatures"
          :key="index"
          @click="toDetail(index)"
        >
          <uni-icons :type="item.icon" color="rgb(41, 36, 36)" size="28" />
        </view>
      </view>
    </slot>
  </view>

  <!-- 地区选择 -->
  <drawers-region ref="address" />
</template>

<script lang="ts" setup>
import { useRegionStore } from '@/store/region';
import drawersRegion from '@/components/common/drawers/drawers-region.vue';
import searchBar from '@/components/layout/search_bar/search-bar.vue'
import { onMounted, ref, watch } from 'vue'
import type { Capsule } from '@/config/data/data'

/**
 * 接受父组件传递的值
 * @param {type} isSearch 是否显示搜索框
 * @param {type} isScrollColor 是否开启滚动变色
 * @param {type} rollDistance 当前页面竖向滚动的距离
 **/
const props = defineProps({
  /**
   * 是否显示搜索框
   */
  isSearch: {
    type: Boolean,
    default: true,
  },
  /**
   * 是否开启滚动变色
   */
  isScrollColor: {
    type: Boolean,
    default: true,
  },
  /**
   * 当前页面竖向滚动的距离,滚动变色
   */
  rollDistance: {
    type: Number,
    default: 0,
  },
  /**
   * 是否显示右侧工具栏,默认关闭
   */
  isToolbar: {
    type: Boolean,
    default: false,
  },
  /**
   * 是否开启固定定位模式,默认true false  粘性模式
   */
  isFixed: {
    type: Boolean,
    default: true,
  },
})

//区域全局状态
const useRegion = useRegionStore()

//地址抽屉栏实例
const address = ref<InstanceType<typeof drawersRegion> | null>(null)

//导航栏是否显示背景颜色
const isDisplayBackColor = ref<boolean>(false)

//胶囊信息
const capsule = ref<Capsule>()

//其他功能信息
const otherFeatures = ref([
  {
    icon: 'headphones', //图标
    path: '', //路径
    typed: '', //类型
  },
  {
    icon: 'chatboxes',
    path: '',
    typed: '',
  },
  {
    icon: 'scan',
    path: '',
    typed: 'scanCode',
  },
])

/**
 * 跳转部分详情页面
 * @param {type} index 其他功能信息列表的下标
 */
const toDetail = (index: number) => {
  switch (otherFeatures.value[index].typed) {
    case 'scanCode':
      // 只允许通过相机扫码
      uni.scanCode({
        success: function (res) {
          console.log('条码类型：' + res.scanType)
          console.log('条码内容：' + res.result)
        },
      })
      break
    default:
      uni.navigateTo({ url: `@/subpkg/${otherFeatures.value[index].path}` })
  }
}

//监听父组件传递的 rollDistance
watch(
  () => props.rollDistance,
  (newValue, oldValue) => {
    scrollHandler(newValue)
  }
)

//页面加载
onMounted(() => {
  //获取胶囊信息
  let menu = uni.getMenuButtonBoundingClientRect()
  if (menu) {
    capsule.value = menu as unknown as Capsule
  }
})

/**
 * 滚动定时器
 */
const scrollTimer = ref()

/**
 * 显示背景景颜色
 * @param rollDistance 滚动距离
 */
const scrollHandler = (rollDistance: number = 0) => {
  //如果没有开启滚动变色，直接结束方法
  if (!props.isScrollColor) {
    return
  }
  if (rollDistance <= 20 || rollDistance >= 25) {
    if (scrollTimer.value) {
      clearTimeout(scrollTimer.value)
    }
    //如果滚动距离大于40，直接显示背景颜色
    if (rollDistance >= 30) {
      isDisplayBackColor.value = true
      return
    }
    scrollTimer.value = setTimeout(() => {
      isDisplayBackColor.value = rollDistance >= 40
    }, 30)
  }
}
</script>

<style scoped lang="scss">
.fixed {
  position: fixed !important;
}
.top_navigation_bar_box {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  width: calc(100% - 40rpx);
  padding: 0 20rpx 20rpx;
  height: 60rpx;
  z-index: 99;
  color: rgb(41, 36, 36);
  transition: all 0.2s;

  .left,
  .right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .left {
    max-width: 200rpx;
    height: 100%;

    .icon {
      transform: translateY(2rpx);
    }

    .msg {
      width: 150rpx;
      margin-left: 6rpx;
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .middle {
    margin-left: 5rpx;
    margin-right: auto;
    width: calc(100% - 405rpx);
    height: calc(100% - 8rpx);
    opacity: 0.9;
  }

  .right {
    width: 200rpx;
    justify-content: space-around;
  }
}
</style>
